<nav id="sidebar" class="sidebar-wrapper"   style="z-index: 999">
    <div class="sidebar-content ">
        <a href="#" id="toggle-sidebar"><i class="fa fa-bars"></i></a>
        <div class="sidebar-brand">
            <a href="#">个人博客</a>
        </div>
        <div class="sidebar-header">
            <div id='user' class="user-pic">
                <img  class="img-responsive img-rounded" src="" alt="">
            </div>
            <div class="user-info">
                <span class="user-name"><strong>余立东</strong></span>
                <div class="user-status">
                    <span class="user-role" style="margin-top: 10px;">一名可爱的PHP开发程序员</span>
                </div>
                <div  id="big-user"  style="display: none"><img  class="img-responsive img-rounded" src=""   alt="余立东"  /></div>
            </div>
        </div><!-- sidebar-header  -->
        <div class="sidebar-search">
            <div>
                <div class="input-group">
                    <input type="text" class="form-control search-menu" placeholder="Search for...">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div><!-- sidebar-search  -->
        <div class="sidebar-menu">
            <ul>
                <li class="header-menu"><span>Category</span></li>
                <li class="sidebar-dropdown">
                    <a  href="#" ><i class="fa fa-tv"></i><span>Menu 1</span><span class="label label-danger">New</span></a>
                    <div class="sidebar-submenu">
                        <ul>
                            <li><a href="#">submenu 1 <span class="label label-success">10</span></a> </li>
                            <li><a href="#">submenu 2</a></li>
                            <li><a href="#">submenu 3</a></li>
                            <li><a href="#">submenu 4</a></li>
                        </ul>
                    </div>
                </li>
                <li class="sidebar-dropdown">
                    <a href="#"><i class="fa fa-photo"></i><span>Menu 2</span><span class="badge">3</span></a>
                    <div class="sidebar-submenu">
                        <ul>
                            <li><a href="#">submenu 1 <span class="badge">2</span></a></li>
                            <li><a href="#">submenu 2</a></li>
                            <li><a href="#">submenu 3</a></li>
                            <li><a href="#">submenu 4</a></li>
                        </ul>
                    </div>
                </li>
                <li class="sidebar-dropdown">
                    <a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a>
                    <div class="sidebar-submenu">
                        <ul>
                            <li><a href="#">submenu 1</a></li>
                            <li><a href="#">submenu 2</a></li>
                            <li><a href="#">submenu 3</a></li>
                            <li><a href="#">submenu 4</a></li>
                        </ul>
                    </div>
                </li>
                <li class="sidebar-dropdown">
                    <a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a>
                    <div class="sidebar-submenu">
                        <ul>
                            <li><a href="#">submenu 1</a></li>
                            <li><a href="#">submenu 2</a></li>
                            <li><a href="#">submenu 3</a></li>
                            <li><a href="#">submenu 4</a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-menu"><span>Simple menu</span></li>
                <li><a href="#"><i class="fa fa-tv"></i><span>Menu 1</span></a></li>
                <li><a href="#"><i class="fa fa-photo"></i><span>Menu 2</span></a></li>
                <li><a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a></li>
                <li><a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a></li>
            </ul>
        </div><!-- sidebar-menu  -->
        <div class="sidebar-header">
            <div class="user-pic" id='wx'>
                <img   class="img-responsive img-rounded" src=""   alt="微信" />
            </div>
            <div class="user-pic" >
                <img   class="img-responsive img-rounded" src=""   alt="微信" />
            </div>
            <div class="user-pic" >
                <img   class="img-responsive img-rounded" src=""   alt="微信" />
            </div>
            <div  id="big-wx"  style="display: none"><img  class="img-responsive img-rounded" src=""   alt="微信"  /></div>
            <div class="user-info">
                <div class="user-status">
                    <span class="user-role" style="margin-top: 10px;"> Copyright &copy; 2018-2019.Company name All rights</span>
                </div>
                <span class="user-role"><strong>ICP证：皖ICP备18008253号</strong></span>
            </div>
        </div><!-- sidebar-header  -->

    </div><!-- sidebar-content  -->

    <div class="sidebar-footer">
        <a href="#"><i class="fa fa-bell"></i><span class="label label-warning notification">3</span></a>
        <a href="#"><i class="fa fa-envelope"></i><span class="label label-success notification">7</span></a>
        <a href="#"><i class="fa fa-gear"></i></a>
        <a href="#"><i class="fa fa-power-off"></i></a>
    </div>
</nav><!-- sidebar-wrapper  -->

<style>
    #big-wx{
        display:block;
        position: absolute;
        top:80%;
        left: 80px;
        width: 150px;
        height:150px;
    }
    #big-user{
        display:block;
        position: absolute;
        top:10%;
        left: 80px;
        width: 150px;
        height:150px;
        z-index: 99999999999;
    }
</style>
<script>
    $('#wx').hover(function(){
        $('#big-wx').toggle()
    })

    $('#user').hover(function(){
        $('#big-user').toggle()
    })
</script>